<template>
	<view>
		<form action="">
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
				<view class="gui-form-item gui-border-b">
					<text class="gui-form-label gui-secondary-text">新密码</text>
					<view class="gui-form-body">
						<input type="text" class="gui-form-input" v-model="formData.pass" name="name1"
							placeholder="新密码" />
					</view>
				</view>
				<view class="gui-form-item gui-border-b">
					<text class="gui-form-label gui-secondary-text">确认密码</text>
					<view class="gui-form-body">
						<input type="text" class="gui-form-input" v-model="formData.pass2" name="name1"
							placeholder="确认密码" />
					</view>
				</view>
				<view class="gui-form-item gui-border-b">
					<text class="gui-form-label gui-secondary-text">手机号</text>
					<view class="gui-form-body">
						<input type="text" class="gui-form-input" v-model="formData.phone" name="name1"
							placeholder="手机号" />
					</view>
				</view>
				<view class="gui-form-item gui-border-b">
					<text class="gui-form-label gui-secondary-text">验证码</text>
					<view class="gui-form-body"
						style="display: flex;justify-content: space-between;align-items: center;">
						<input type="text" class="gui-form-input" v-model="formData.code" name="name1"
							placeholder="验证码" />
						<view style="position: absolute;right:80rpx;">
							<text class="gui-bg-blue gui-color-white " style="padding: 8rpx 10rpx;" @click="send_sms"
								v-if="showPhone == true">发送验证码</text>
							<text class="gui-text-center gui-color-blue gui-bold" style="font-size: 28rpx;"
								v-if="showPhone == false">{{PhoneCode}}秒后可重新发送</text>
						</view>
						<!-- <view class="gui-bg-blue gui-color-white " style="padding: 8rpx 10rpx;" @click="send_sms">发送验证码
						</view> -->
						<!-- <text class="gui-text-center gui-color-blue gui-bold" @click="setEmail"
							v-if="showPhone == false">{{PhoneCode}}秒后重新发送</text> -->
					</view>
				</view>
				<view class="gui-margin">
					<button type="primary" @click="submit">确定</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PhoneCode: 60,
				showPhone: true,
				code: true,
				formData: {
					phone: '',
					pass: '',
					pass2: '',
					code: '',
				}
			}
		},
		methods: {
			send_sms() {
				let self = this
				this.$boya.NPost("/app/sms_code", {
					phone: this.formData.phone
				}, function(res) {
					console.log('验证码：', res);
					if (res.code == 200) {
						self.showPhone = false
						// self.PhoneCode = 60
						let timer = setInterval(() => {
								self.PhoneCode--;
								if (self.PhoneCode < 1) {
									clearInterval(timer)
									self.PhoneCode = 0
									self.showPhone = true
									// if (self.code == true) {
										uni.showToast({
											title: "验证码已超时，若未修改完成密码请重新获取",
											icon: "none"
										})
									// }
								}
							},
							1000)
						console.log('res: ', res);
					} else {
						self.$boya.msg(res.msg)
					}
				})
			},
			submit() {
				let self = this
				this.$boya.NPost("/app/user/change_password", this.formData, function(res) {
					console.log(res);
					if (res.code == 200) {
						self.code = false
						self.$boya.msg('提交成功')
						setTimeout(() => {
							uni.redirectTo({
								// MY/config
								url: '/pages/MY/config'
							})
						}, 1200)
					}
				})
			}
		}
	}
</script>

<style>

</style>